<template>
	<view>
		<view class="cu-form-group margin-top">
			<view class="title">题型</view>
			<picker @change="TypeChange" :value="typeIndex" :range="typeSelect" :range-key="'text'">
				<view class="picker">{{ typeIndex !== -1 ? typeSelect[typeIndex].text : '请选择题型' }}</view>
			</picker>
		</view>
		<view class="cu-form-group align-start">
			<view class="title">题目</view>
			<!-- maxlength设置为 -1 的时候不限制最大长度 -->
			<textarea maxlength="-1" placeholder="请输入题目" v-model="title"></textarea>
		</view>

		<!-- app会强类型检查所以字符串和数字类型不要搞混了，不然会不能生效 -->
		<view class="selections" v-if="typeIndex === 1 || typeIndex === 2">
			<view class="cu-form-group" v-for="(option, index) in optionList" v-bind:key="index">
				<view class="title">
					选项{{ option.id }}
					<text class="cuIcon-selectionfill text-blue"></text>
				</view>
				<input placeholder="请输入选项" name="input" v-model="option.content" />
			</view>
		</view>

		<view v-if="typeIndex === 0" class="cu-form-group align-start">
			<view class="title">答案</view>
			<picker @change="JudgeChange" :value="judgeIndex" :range="judgeSelect" :range-key="'text'">
				<view class="picker">{{ judgeIndex !== -1 ? judgeSelect[judgeIndex].text : '请选择答案' }}</view>
			</picker>
		</view>

		<view v-else-if="typeIndex === 1" class="cu-form-group align-start">
			<view class="title">答案</view>
			<picker @change="ChoiceChange" :value="choiceIndex" :range="choiceSelect" :range-key="'text'">
				<view class="picker">{{ choiceIndex !== -1 ? choiceSelect[choiceIndex].text : '请选择答案' }}</view>
			</picker>
		</view>

		<view v-else-if="typeIndex === 2" class="cu-form-group">
			<view class="title">答案</view>
			<checkbox-group class="cu-form-group" @change="CheckChioceChange">
				<view v-for="(choice, index) in choiceSelect" v-bind:key="index">
					<checkbox
						:value="choice.text"
						class="checkItem blue"
						:class="answer.indexOf(choice.text) > -1 ? 'checked' : ''"
						:checked="answer.indexOf(choice.text) > -1 ? true : false"
					></checkbox>
					{{ choice.text }}
				</view>
			</checkbox-group>
		</view>

		<view v-else class="cu-form-group align-start">
			<view class="title">答案</view>
			<textarea maxlength="-1" placeholder="请输入答案" v-model="answer"></textarea>
		</view>

		<view class="cu-form-group align-start">
			<view class="title">解析</view>
			<textarea maxlength="-1" placeholder="请输入解析" v-model="explain"></textarea>
		</view>
		<view class="cu-form-group" v-show="false">
			<view class="title">是否作为考题</view>
			<switch @change="IsSubject" :class="isSubject ? 'checked' : ''" :checked="isSubject ? true : false"></switch>
		</view>
		<view class="padding flex flex-direction"><button class="cu-btn bg-blue lg" @click="Submit">提交</button></view>

		<view class="cu-load load-modal" v-if="loadModal">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/logo.jpg" mode="aspectFit"></image>
			<view class="gray-text">上传中...</view>
		</view>
	</view>
</template>

<script>
import index from './index.js';
export default index;
</script>

<style>
.cu-form-group .title {
	min-width: calc(4em + 15px);
}

.selections {
	padding-top: 1rpx;
	padding-bottom: 1rpx;
}

.checkItem {
	margin-left: 36rpx;
	margin-right: 6rpx;
}
</style>
